'use client';

import React from 'react';
import { EventModel } from '../lib/api';

interface Props {
  events: EventModel[] | undefined;
  loading: boolean;
  onRefresh: () => void;
  onReply: (event: EventModel) => void;
  onViewAttachments: (event: EventModel) => void;
}

export function TimelinePanel({ events, loading, onRefresh, onReply, onViewAttachments }: Props) {
  return (
    <section className="panel">
      <header className="panel-header">
        <div>
          <h2>Timeline</h2>
          <span className="muted">Posts and activity for the selected owner</span>
        </div>
        <div className="actions">
          <button className="ghost" onClick={onRefresh}>Refresh</button>
        </div>
      </header>
      <div className="panel-body timeline">
        {loading && <p className="muted">Loading timeline…</p>}
        {!loading && (!events || events.length === 0) && <p className="muted">No events yet.</p>}
        {events?.map(event => (
          <article key={event.id} className="event-card">
            <header>
              <span className="event-type">{event.type}</span>
              <span className="event-meta">{event.actor} → {event.owner}</span>
              <time>{new Date(event.created_at).toLocaleString()}</time>
            </header>
            <pre className="event-content">{event.content}</pre>
            {event.attachments.length > 0 && (
              <div className="attachments">
                <button className="link" onClick={() => onViewAttachments(event)}>
                  {event.attachments.length} attachment{event.attachments.length > 1 ? 's' : ''}
                </button>
              </div>
            )}
            <footer>
              <div className="tags">
                {event.headers.tags?.split(',').map(tag => (
                  <span key={tag} className="tag">#{tag.trim()}</span>
                ))}
              </div>
              <div className="event-actions">
                <button className="ghost" onClick={() => onReply(event)}>Reply</button>
              </div>
            </footer>
          </article>
        ))}
      </div>
    </section>
  );
}
